﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
    x:Class="Matchingo.UserControls.PlainCardControl.PlainCardUserControl"
	d:DesignWidth="640" d:DesignHeight="480" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
	<UserControl.Resources>

		<Storyboard x:Name="ShowFront">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.Visibility)">
				<DiscreteObjectKeyFrame KeyTime="00:00:00">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="00:00:00.1500000">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="RearImageElement" Storyboard.TargetProperty="(UIElement.Visibility)">
				<DiscreteObjectKeyFrame KeyTime="00:00:00">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="HideFront">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.Visibility)">
				<DiscreteObjectKeyFrame KeyTime="00:00:00">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="00:00:00.1500000">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="RearImageElement" Storyboard.TargetProperty="(UIElement.Visibility)">
				<DiscreteObjectKeyFrame KeyTime="00:00:00">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="HideBack">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RearImageElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.Visibility)">
				<DiscreteObjectKeyFrame KeyTime="00:00:00">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="ShowBack">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RearImageElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.15000000" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RearImageElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RearImageElement" Storyboard.TargetProperty="(UIElement.Visibility)">
				<DiscreteObjectKeyFrame KeyTime="00:00:00">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="00:00:00.1500000">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="ExplodeMatch">
			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="RearImageElement" Storyboard.TargetProperty="(UIElement.Visibility)">
				<DiscreteObjectKeyFrame KeyTime="00:00:00">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Collapsed</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.Visibility)">
				<DiscreteObjectKeyFrame KeyTime="00:00:00">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
				<DiscreteObjectKeyFrame KeyTime="00:00:00.1500000">
					<DiscreteObjectKeyFrame.Value>
						<Visibility>Visible</Visibility>
					</DiscreteObjectKeyFrame.Value>
				</DiscreteObjectKeyFrame>
			</ObjectAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1.25"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1.25"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FrontImageElement" Storyboard.TargetProperty="(UIElement.Opacity)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="CardDealingTop">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-489"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" KeySpline="0.193000003695488,0.699000000953674,0.307000011205673,0.804000020027161"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="CardDealingBottom">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="490"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" KeySpline="0.196999996900558,0.794000029563904,0.287000000476837,0.893999993801117"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="CardDealingLeft">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" KeySpline="0.20100000500679,0.804000020027161,0.294999986886978,0.898999989032745"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-650"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" KeySpline="0.20100000500679,0.804000020027161,0.294999986886978,0.898999989032745"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="CardDealingRight">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" KeySpline="0.196999996900558,0.799000024795532,0.294999986886978,0.898999989032745"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="651"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" KeySpline="0.196999996900558,0.799000024795532,0.294999986886978,0.898999989032745"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>

    <Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5,0.5">       
    	<vsm:VisualStateManager.VisualStateGroups>
    		<vsm:VisualStateGroup x:Name="MouseGroup">
    			<vsm:VisualStateGroup.Transitions>
    				<vsm:VisualTransition GeneratedDuration="00:00:00.1000000"/>
    			</vsm:VisualStateGroup.Transitions>
    			<vsm:VisualState x:Name="MouseOut"/>
    			<vsm:VisualState x:Name="MouseOver">
    				<Storyboard>
    					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
    						<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.05"/>
    					</DoubleAnimationUsingKeyFrames>
    					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
    						<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.05"/>
    					</DoubleAnimationUsingKeyFrames>
    				</Storyboard>
    			</vsm:VisualState>
    		</vsm:VisualStateGroup>
    	</vsm:VisualStateManager.VisualStateGroups>

        <!-- we want the padding to scale with the cards (not be a fixed value), so we put everything in a grid in the center
             column/row and use the first/last rows/columns to give some relative(*) padding -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="100*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="100*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>


        <Grid.RenderTransform>
    		<TransformGroup>
    			<ScaleTransform/>
    			<SkewTransform/>
    			<RotateTransform/>
    			<TranslateTransform/>
    		</TransformGroup>
    	</Grid.RenderTransform>
        
		<!-- hit target -->
		<!-- we dont want the mouse over/out to fire because of the flipping animations, so we have a rear
		     hidden grid which will always have a hit region behind whichever side is shown -->
		<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
              Grid.Column="1" Grid.Row="1" 
			  IsHitTestVisible="True"></Grid>
		
        <!-- front poloroid -->
        <Grid x:Name="FrontImageElement" 
              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
              Grid.Column="1" Grid.Row="1"
              RenderTransformOrigin="0.5,0.5"
              Visibility="Collapsed" Background="#FFFFFEEB">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
                
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1"/>
                        <ColumnDefinition Width="40*"/>
                        <ColumnDefinition Width="1"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*"/>
                        <RowDefinition Height="1"/>
                        <RowDefinition Height="40*"/>
                        <RowDefinition Height="1"/>
                        <RowDefinition Height="1*"/>
                    </Grid.RowDefinitions>
                    
                    <Rectangle Grid.Column="0" Grid.ColumnSpan="5"
                               Grid.Row="0" Grid.RowSpan="5"
                               Fill="#BB484848"/>
                    <Rectangle Grid.Column="1" Grid.ColumnSpan="3"
                               Grid.Row="1" Grid.RowSpan="3"
                               Fill="#FFFFFFFF"/>
                    <Image x:Name="FrontImageImage" 
                           Grid.Column="2" 
                           Grid.Row="2" 
                           VerticalAlignment="Top"
                           HorizontalAlignment="Center"
                           Stretch="UniformToFill"/>                        
                </Grid>
        </Grid>
        
        <!-- rear poloroid -->
        <Grid x:Name="RearImageElement" 
              Grid.Column="1" Grid.Row="1"
              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
              RenderTransformOrigin="0.5,0.5" 
              Visibility="Visible">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>

            <!--
            <Rectangle Grid.Column="0" Grid.ColumnSpan="3"
                       Grid.Row="0" Grid.RowSpan="3"
                       Fill="#FF434343"/>
            -->
            
            <Border BorderThickness="2" BorderBrush="#BB484848">
                <Grid>
                    <Rectangle Grid.Column="1" Grid.Row="1"
                               Fill="White" Opacity="0.90" />

                    <Rectangle 
                        Grid.Column="1" Grid.Row="1"
                        HorizontalAlignment="Stretch" 
                        VerticalAlignment="Stretch" Stroke="#FF000000" Opacity="0.25" StrokeThickness="0">
                        <Rectangle.Fill>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.637" ScaleY="1.995"/>
                                        <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                        <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                        <TranslateTransform X="-0.006" Y="0.652"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Color="#FF4D4D4D"/>
                                <GradientStop Color="#FFFFFFFF" Offset="1"/>
                                <GradientStop Color="#FFADADAD" Offset="0.75"/>
                                <GradientStop Color="#FFF3F3F3" Offset="0.781"/>
                            </RadialGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</UserControl>